<script setup>

    const emit = defineEmits(['areaSearch'])

    const props = defineProps({
        title: {
            type: String,
            default: '皱城市区域列表'
        }
    })

    // 搜索关键字
    let keyword = $ref('')

    // 搜索
    const handleSearch = () => {
        emit('areaSearch', keyword)
    }

</script>

<template>
    <div class="left-card">
        <div class="title">{{ props.title }}</div>
        <div class="search-input-wrap flex-between">
            <input type="text" class="search-input" v-model="keyword" @input="handleSearch">
            <img class="search-icon" src="../assets/images/search.png" @click="handleSearch">
        </div>

        <el-scrollbar class="town-list-warp">
            <slot></slot>
        </el-scrollbar>
    </div>
</template>

<style lang="less" scoped>
    .left-card{
        width: 275px;
        height: 852px;
        padding: 40px 25px;
        background: url('../assets/images/left-list.png') center no-repeat;
        background-size: 100% 102%;
        color: #17CAF0;

        .title{
            font-size: 22px;
            text-align: center; 
        }

        .search-input-wrap{
            width: 100%;
            height: 40px;
            border: 2px solid #52CCFF;
            border-radius: 4px;
            padding: 0 16px;
            margin: 15px 0 18px 0;

            .search-input{
                width: 170px;
                height: 38px;
                border: none;
                color: #52CCFF;
                font-size: 18px;
            }

            .search-icon{
                cursor: pointer;
            }
        }

        .town-list-warp{
            height: 680px;
        }
    }
</style>